import styled from 'styled-components';
import { colorBlue, colorRed, titleSize } from '../common.js';
/* 
基于 'styled.标签名' 这种方式编写需要的样式
 + 样式要写在'ES6模版字符串中'
 + 返回并且导出的结果是一个自定义组件

 如果编写样式的时候没有提升,需要在vscode中安装一个插件：vscode-styled-components
*/

export const NavBox = styled.nav`
  background-color: lightblue;
  width: 300px;

  .title {
    font-size: ${titleSize};
    color: ${colorRed};
    &:hover {
      color: ${colorBlue};
    }
  }
`;
